<template>
    <div class="container">
        <!-- 现在是上面的三个按钮 -->
        <div class="header">
            <div>
                <button
      :class="{ active: selectedButton === '/algorithmConfiguration' }"
      class="custom-button"
      @click="jumpToThree('/algorithmConfiguration')"
    >
      算法配置
    </button>

    <button
      :class="{ active: selectedButton === '/algorithmicScenarios' }"
      class="custom-button"
      @click="jumpToThree('/algorithmicScenarios')"
    >
      算法场景配置
    </button>


    <button
      :class="{ active: selectedButton === '/largeModel' }"
      class="custom-button"
      @click="jumpToThree('/largeModel')"
    >
      大模型配置
    </button>

    <button
      v-if="authStore.user?.roleID === 1"
      :class="{ active: selectedButton === '/usermanagement' }"
      class="custom-button"
      @click="jumpToThree('/usermanagement')"
    >
      用户管理
    </button>
            </div>
        </div>
        <div class="main">
            <!-- 这里又会展示三级路由菜单，分别是算法配置，算法场景演示，用户管理 -->
            <router-view></router-view>
        </div>
      
    </div>
</template>

<script lang="ts" setup>
import { useAuthStore } from '../stores/user';
import { useRouter } from 'vue-router'
import { ref,onMounted } from 'vue';
// Store 数据
const authStore = useAuthStore();//使用store仓库进行数据管理
const selectedButton = ref(''); // 记录当前选中的按钮
const router = useRouter();
const jumpToThree = (path:string) =>{

    selectedButton.value = path; // 更新选中的按钮

    router.push(path)
}

onMounted(() => {
  selectedButton.value = window.location.pathname;
});

</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
}
.header {
    width: 100%;
    height: 15%;
    display: flex;
    flex-direction:row;
    align-items:center;
}
.main {
    width: 100%;
    height: 85%;
}
/* 按钮基础样式 */
.custom-button {
  margin-right: 1rem;
  width: 10rem;
  height: 2.7rem;
  background-color: #77a2d2;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
}

/* 选中状态 */
.custom-button.active {
  background-color: #409EFF !important; /* 选中时的颜色 */
  box-shadow: 0 4px 10px rgba(228, 227, 227, 0.5); /* 添加阴影 */
  transform: scale(1.05); /* 轻微放大按钮 */
}

/* 鼠标悬停效果 */
.custom-button:hover {
  background-color: #5aa0f0;
}

/* 按钮点击效果（按下时缩小一点） */
.custom-button:active {
  transform: scale(0.95);
}
</style>